<template>
  <div class="plan-table-container">
    <el-empty v-if="plans.length === 0" description="暂无方案数据" />
    <base-table v-else :data="plans" :border="false" :show-pagination="false">
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="plan-detail-expand">
            <p><strong>方案描述：</strong>{{ row.description }}</p>
            <p><strong>攻击方法：</strong>{{ row.attackTechniques.join(', ') }}</p>
            <p><strong>创建时间：</strong>{{ row.createTime }}</p>
            <p><strong>最近执行：</strong>{{ row.lastExecuteTime || '从未执行' }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="方案名称" min-width="200" show-overflow-tooltip />
      <el-table-column prop="type" label="方案类型" width="120">
        <template #default="{ row }">
          <el-tag :type="getTagType(row.type)">{{ row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="scenario" label="业务场景" width="120" />
      <el-table-column prop="busType" label="总线类型" width="120" />
      <el-table-column prop="executeCount" label="执行次数" width="90" align="center" />
      <el-table-column label="操作" width="280">
        <template #default="{ row }">
          <div class="action-buttons">
            <el-button type="primary" link @click="viewPlan(row)">查看</el-button>
            <el-button type="success" link @click="editPlan(row)">编辑</el-button>
            <el-button type="warning" link @click="executePlan(row)">执行</el-button>
            <el-button type="info" link @click="exportPlan(row)">导出</el-button>
            <el-button 
              :type="row.isFavorite ? 'danger' : 'default'"
              link 
              @click="toggleFavorite(row)"
            >
              {{ row.isFavorite ? '取消收藏' : '收藏' }}
            </el-button>
            <el-button type="danger" link @click="deletePlan(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </base-table>
  </div>
</template>

<script setup>
/**
 * 方案表格组件
 * @file index.vue
 */
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import BaseTable from '@/components/BaseTable/index.vue'

const props = defineProps({
  /**
   * 方案数据数组
   * @type {Array}
   */
  plans: {
    type: Array,
    required: true
  }
})

const router = useRouter()

/**
 * 查看方案
 * @param {Object} row - 方案对象
 */
const viewPlan = (row) => {
  router.push(`/tactical-plan/detail/${row.id}`)
}

/**
 * 编辑方案
 * @param {Object} row - 方案对象
 */
const editPlan = (row) => {
  router.push(`/tactical-plan/create?id=${row.id}`)
}

/**
 * 执行方案
 * @param {Object} row - 方案对象
 */
const executePlan = (row) => {
  ElMessage.success(`开始执行方案: ${row.name}`)
}

/**
 * 删除方案
 * @param {Object} row - 方案对象
 */
const deletePlan = (row) => {
  ElMessageBox.confirm(
    `确定要删除方案"${row.name}"吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

/**
 * 收藏/取消收藏方案
 * @param {Object} row - 方案对象
 */
const toggleFavorite = (row) => {
  row.isFavorite = !row.isFavorite
  ElMessage.success(row.isFavorite ? '已添加到收藏' : '已取消收藏')
}

/**
 * 导出方案
 * @param {Object} row - 方案对象
 */
const exportPlan = (row) => {
  ElMessage.success(`正在导出方案: ${row.name}`)
}

/**
 * 获取标签类型
 * @param {string} type - 方案类型
 * @returns {string} 对应的Element Plus标签颜色类型
 */
const getTagType = (type) => {
  const typeMap = {
    '单兵作战': 'success',
    '系统协同': 'warning',
    '攻防对抗': 'danger',
  }
  return typeMap[type] || 'info'
}
</script>

<style lang="scss" scoped>
.plan-table-container {
  .plan-detail-expand {
    padding: 12px 24px;
    // background-color: #f5f7fa;
    background-color: var(--table-bg);
    border-radius: 4px;
    
    p {
      margin: 10px 0;
      line-height: 1.6;
      color: #5e6d82;
      font-size: 14px;

      strong {
        color: #409EFF;
        font-weight: 500;
        margin-right: 8px;
      }
    }
  }

  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
</style> 